<config lang="json">
{
  navigationBarTitleText: '学徒中心',
  usingComponents: {

  }
}
</config>

<template>
  <div class="page">
    <div class="student-header-warpper page-header-warpper fixed-top d-flex justify-content-center">
      <div class="student-header page-header">
        <div class="d-flex student-header-content page-header-content">
          <div class="mr-auto d-flex">
            <div class="mr-2 position-relative">
              <img class="big-avatar" :src="$globalData.userInfo.avatarUrl" />
              <img :src="'student-icon.png'|imgUrl" class="bottom-left-pos-icon" alt="">
            </div>
            <div class="pl-1">
              <h1>{{$globalData.userInfo.nickName}}</h1>
              <span class="mr-2 font-small">徒弟</span>
              <span class="mr-2 font-small">{{user.area}}</span>
              <span class="font-small">{{studentInfo.job|job}}</span>
            </div>
          </div>
          <div class="d-flex mr-2">
            <div class="ability-icon mr-1" @click="openAbility">
              <img :src="'ability-icon.png'|imgUrl" alt="">
            </div>
            <div class="achievement-icon position-relative mr-1" @click="openAchievement">
              <img :src="'achievement-icon.png'|imgUrl" alt="">
              <span> {{studentInfo.achievementCount}} </span>
            </div>
            <div  class="rank-icon position-relative" @click="openRank">
              <img :src="'rank-icon.png'|imgUrl" alt="">
              <span>{{studentInfo.rank}}</span>
            </div>
          </div>
        </div>

        <div class="user-attach-info d-flex font-small">
          <div class="mr-auto d-flex align-items-center ml-4">
            <div class="position-relative  mr-2">
              <img class="small-avatar" :src="studentInfo.teacherAvatar | avatarUrl" />
              <img :src="'teacher-icon.png'|imgUrl" class="teacher-icon" alt="">
            </div>

            <span>{{studentInfo.teacherName}}</span>
          </div>
          <div class="d-flex align-items-center mr-4 " style="  opacity: 0.6;">
            <div class="mr-2">拜师:</div>
            <span>{{studentInfo.startStudyTime}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="student-body page-body">
      <div class="tab-item" v-if="isShowTab(0)">
        <StudentCurrent :contentHeight="contentHeight"></StudentCurrent>
      </div>
      <div class="tab-item" v-if="isShowTab(1)">
        <StudentHistory></StudentHistory>
      </div>
      <div class="tab-item" v-if="isShowTab(2)">
        <StudentAchievement></StudentAchievement>
      </div>
      <div class="tab-item" v-if="isShowTab(3)">
        <StudentRank></StudentRank>
      </div>
    </div>

    <van-tabbar :active="active" @change="onChange" active-color="#FF790C" custom-class="custom-tab-bar">
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/current-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/current-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[0]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/huigu-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/huigu-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[1]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/chengjiu-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/chengjiu-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[2]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/paihang-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/paihang-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[3]}}
      </van-tabbar-item>
    </van-tabbar>

    <div v-if="showAbility">
      <van-dialog use-slot show="true" @close="onCloseAbility" className="vant-dialog-class" catchtouchmove="preventTouchMove">
        <div class="ability-content-warpper ">
          <img :src="'dialog-bg.png'|imgUrl" alt="">
          <div class="ability-content">
            <h1 style="margin:16px 0; text-align:center;width:100%">学徒综合能力模型</h1>
            <view class="container">
              <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" :ec="ec"></ec-canvas>
            </view>
          </div>
        </div>
      </van-dialog>
    </div>

  </div>
</template>
<script lang="ts">
import StudentAchievement from './pages/achievement/index.vue'
import StudentCurrent from './pages/current/index.vue'
import StudentHistory from './pages/history/index.vue'
import StudentRank from './pages/rank/index.vue'
import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import { AppUser } from '../utils/GlobalData'

@Component({
  components: {
    StudentAchievement,
    StudentCurrent,
    StudentHistory,
    StudentRank
  }
})
export default class StudentIndex extends Vue {
  // 这里不使用van-dialog的show控制..因为要延迟渲染canvas..否则获得不了canvas的准确宽和高,所以用了v-if
  public showAbility = false;
  @Action getStudentInfoAsync;
  @Action getStudentRank;

  @Action updateStudentTaskStatus;

  public ec = {
    options: {}
  };

  public onShow () {
    this.computeScrollViewHeight()
  }
  public contentHeight;
  public computeScrollViewHeight () {
    let that = this
    let query = wx.createSelectorQuery()
    let windowHeight = wx.getSystemInfoSync().windowHeight
    query.select('.page-header-warpper').boundingClientRect(function (res) {
      that.contentHeight = windowHeight - res.bottom - 55 - 83 - 48
    }).exec()
  }

  public get user (): AppUser {
    return this.$globalData.appUser
  }

  public get studentInfo () {
    return this.$store.state.student.studentInfo
  }
  public active = 0;
  private barTitles = ['当前', '回顾', '成就', '排名'];
  public async created () {
    await this.getStudentInfoAsync()
    var abilitys = this.studentInfo.abilitys

    if (this.studentInfo.job === 0) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '销售能力', max: 100 },
            { name: '策划能力', max: 100 },
            { name: '市场研究', max: 100 },
            { name: '管理能力', max: 100 },
            { name: '资源整合', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['XiaoShou'] || 0,
                  abilitys['CeHua'] || 0,
                  abilitys['ShiChang'] || 0,
                  abilitys['GuanLi'] || 0,
                  abilitys['ZiYuan'] || 0
                ]
              }
            ]
          }
        ]
      }
    } else if (this.studentInfo.job === 1) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '团队人员管理', max: 100 },
            { name: '团队文化锻造', max: 100 },
            { name: '业务基础精进', max: 100 },
            { name: '技术工艺创新', max: 100 },
            { name: '外部资源整合', max: 100 },
            { name: '内部资源协调', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['TuanDuiRenYuan'] || 0,
                  abilitys['TuanDuiWenHua'] || 0,
                  abilitys['YeWuJiChu'] || 0,
                  abilitys['YeWuChuangXin'] || 0,
                  abilitys['ZiYuanDuiWai'] || 0,
                  abilitys['ZiYuanDuiNei'] || 0
                ]
              }
            ]
          }
        ]
      }
    }

    this.$globalData.updateTask = this.updateTask
  }
  public async updateTask (task) {
    this.updateStudentTaskStatus({
      taskId: task.id,
      year: task.year,
      quarter: task.quarter,
      status: task.status
    })
  }

  public isShowTab (index) {
    return this.active === index
  }
  public async onChange (event) {
    this.active = event.detail
    Megalo.setNavigationBarTitle({ title: this.barTitles[event.detail] })
  }

  public openAchievement () {
    this.active = 2
  }

  public openRank () {
    this.active = 3
  }

  public openAbility () {
    this.showAbility = true
  }

  public onCloseAbility () {
    this.showAbility = false
  }

  public async onReachBottom () {
    if (this.active !== 3) {
      return
    }
    Megalo.showLoading({
      title: '加载中'
    })
    await this.getStudentRank()
    Megalo.hideLoading()
  }
}
</script>

<style lang="stylus">
.student-header-warpper {
  width: 100%;
  height: $studentHeaderHeight;
  background: no-repeat url($cdn + 'student-header-bg.png') #f7f7f7 center;
  background-size: 100% 100%;
  background-position: 0px -9px;
  color: #fff;
}

.student-body {
  padding: $studentHeaderHeight 0px $tabbarHeight 0px;
}
</style>
